<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>

</head>
<body>
    <p>邮箱</p>
    <input type="text" id="email">
    <p>密码</p>
    <input type="password" id="password">
    <br>
    <button id="submit" onclick="checkEmail()">登录</button>
    <div id="result"></div>

    <script>
        let msg = [{
                name: '张三',
                age: 20,
                strengths: 'JavaScript',
                avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.39mOMBjUfsK-HL9jUbv1MwHaE7?pid=ImgDet&rs=1',
                email: 'yunding@qq.com',
                password: 33333
            },
            {
                name: '李四',
                age: 19,
                strengths: 'python',
                avatar: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.YlKimVo94OkaZDZCzPIDpAHaFh?pid=ImgDet&rs=1',
                email: '12345678@163.com',
                password: 11111
            },
            {
                name: '王五',
                age: 18,
                strengths: 'Java',
                avatar: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.P2hK9SRjhFE8WM9N8tgWFAHaEQ?pid=ImgDet&rs=1',
                email: 'yundingshuyuan@qq.cn',
                password: 222222
            },
            ]

            function checkEmail(){
                

                
                
                let inputEmail=document.getElementById('email').value
                let inputPassword=document.getElementById('password').value
                let resultDiv = document.getElementById('result')

                let reg = /[^@]+@(qq|163)\.(com|cn)$/;
                if(!reg.test(inputEmail)){
                    
                    resultDiv.innerHTML = `邮箱地址不合法，请符合以下三点规范：- 1.结尾为.com或.cn<br>
                        - 2.仅包含一个小数点<br>
                        - 3.小数点前为@qq或@163。`
                    return;
                }
                else{
                    resultDiv.innerHTML = `邮箱地址合法`
                }
                


                let flag=0;
                for(let i=0;i<msg.length;i++){
                    if(msg[i].email===inputEmail&&msg[i].password.toString()===inputPassword){
                        flag=1;
                        resultDiv.innerHTML =`
                        <div>
                            <p>登陆成功</p>
                            <p>姓名:${msg[i].name}</p>
                            <p>年龄:${msg[i].age}</p>
                            <p>特长:${msg[i].strengths}</p>
                        </div>  `
                        break;
                    }
                }
                if(flag===0){
                    resultDiv.innerHTML=`没有找到该用户`
                }
                
            }


    </script>
</body>
</html>